{% extends "base.html.twig" %}
{% block title %}User Profile
{% endblock %}
{% block head %}
	<link rel="stylesheet" href="../styles/userProfile.css">
	<script src="scripts/nav.js"></script>
	{{ parent() }}
{% endblock %}

{% block content %}
	{% if thanks %}
		<div class="position-fixed top-0 end-0 p-3" style="z-index: 11">
			<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
				<div class="toast-header">
					<img src="../images/Logo.png" class="rounded me-5" alt="logo">
					<button type="button" class="btn-close  ms-5" data-bs-dismiss="toast" aria-label="Close"></button>
				</div>
				<div class="toast-body">
					<strong class="me-auto"> {{ thanks }}</strong>
					Thanks for sharing your travel story with the world!
				</div>
			</div>
		</div>
	{% endif %}
	{% if errors %}
		<div class="position-fixed top-0 end-0 p-3" style="z-index: 1000">
			<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
				<div class="toast-header">
					<img src="../images/Logo.png" class="rounded me-5" alt="logo">
					<button type="button" class="btn-close  ms-5" data-bs-dismiss="toast" aria-label="Close"></button>
				</div>
				<div class="toast-body">
					<strong class="me-auto">There was a problem...</strong>
					<ul>
						{% for error in errors %}
							<li style="list-style-type:none">
								{{error}}
							</li>
						{% endfor %}
					</ul>
				</div>
			</div>
		</div>
	{% endif %}

	<div class="parallax-1">
		<div class="caption">
			<span class="border">
				{{user.first_name}}'s Trip History
			</span>
		</div>
	</div>

	<section class="section p-5">
		<div class="container">

			<div class="row-cols-auto text-center g-4">

				{% if booking_history %}
					{% for trip in booking_history %}
						<!-- Order history Cards -->
						<div class="col">
							<div class="card .bg-light.bg-gradient text-dark rounded-pill">
								<div class="card-body text-center">
									<div class="h1 mb-3">
										<h2 class="h3 card-title">{{ trip.destination_name }}</h2>
										<p class="tripNum">Trip #:
											{{ trip.booking_confirm }}</p>
									</div>
									<div class="destinationImageBox">
										<button class="btn btn-lg submitButton" data-bs-toggle="modal" data-bs-target="#destinationModal{{ trip.id }}">Trip Details</button>
									</div>										
								</div>
							</div>
						</div>
						<!-- Modal -->
						<div class="modal fade" id="destinationModal{{ trip.id }}" tabindex="-1" aria-labelledby="destinationModalLabel" aria-hidden="true">
							<div class="modal-dialog modal-md">
								<div class="modal-content">
									<div class="modal-header">
										<h1 class="text-center card-title text-nowrap" id="destinationModalLabel">Order Summary</h1>
										<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
									</div>
									<div class="modal-body">

										<div class="row ">
											<div class=" col-auto">
											<img src="../{{ trip.destination_imagepath }}" class="d-block w-100" alt="{{ trip.destination_imagepath }}">
											</div>
										</div>

										<h5 class="mt-3">Order Details</h5>
										<hr class="solid">

										<div class="row ">
											<p class="text-start col-7">
												Your confirmation number is:
											</p>
											<p class="text-start col-3">
												<strong>{{ trip.booking_confirm }}</strong>
											</p>
										</div>

										<div class="row ">
											<p class="text-start col-7">
												Your total amount paid is:
											</p>
											<p class="text-start col-3">
												<strong>${{ trip.price_cad }}</strong>
											</p>
										</div>

										<div class="row ">
											<p class="text-start col-7">
												Your departure date is:
											</p>
											<p class="text-start col-3">
												<strong>{{ trip.departure_date }}</strong>
											</p>
										</div>

										<div class="row ">
											<p class="text-start col-7">
												Your return date is:
											</p>
											<p class="text-start col-3">
												<strong>{{ trip.return_date }}</strong>
											</p>
										</div>

										<div class="row ">
											<p class="text-start col-7">
												Number of adults:
											</p>
											<p class="text-start col-3">
												<strong>{{ trip.number_adults }}</strong>
											</p>
										</div>

										<div class="row ">
											<p class="text-start col-7">
												Number of children:
											</p>
											<p class="text-start col-3">
												<strong>{{ trip.number_children }}</strong>
											</p>
										</div>

										<div class="row ">
											<p class="text-start col-7">
												Your trip was booked on:
											</p>
											<p class="text-start col-3 ">
												<strong>{{ trip.paymentTS }}</strong>
											</p>
										</div>

										<h5 class="mt-3">Location Details</h5>
										<hr class="solid">

										<div class="row ">
											<p class="text-start col-7">
												Your chosen destination is:
											</p>
											<p class="text-start col-3">
												<strong>{{ trip.destination_name }}</strong>
											</p>
										</div>

										<div class="row ">
											<p class="text-start col-7">
												Your hotel name is:
											</p>
											<p class="text-start col-3">
												<strong>{{ trip.hotel_name }}</strong>
											</p>
										</div>

										<div class="row ">
											<p class="text-start col-7">
												Your hotel city is:
											</p>
											<p class="text-start col-3">
												<strong>{{ trip.hotel_city }}</strong>
											</p>
										</div>

										<div class="row ">
											<p class="text-start col-7">
												Your hotel address is:
											</p>
											<p class="text-start col-3">
												<strong>{{ trip.hotel_address }}</strong>
											</p>
										</div>

										<button class="btn btn-lg submitButton" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Leave a trip story!</button>

										<div class="collapse" id="collapseExample">
											<form class="row g-2" name="{{ trip.booking_confirm }}" method="post" enctype="multipart/form-data">
												<input class="form-control" type="hidden" name="destination_id" value="{{ trip.destination_id }}">
												<div class="col-12 mt-3">
													<label class="input-group-text">Story title</label>
													<input class="form-control" type="text" name="comment_title" value="{{ v.comment_title }}">
													<div class="redText">{{errors.comment_title}}</div>
												</div>

												<div class="col-12 mt-3">
													<span class="input-group-text">{{user.first_name}}'s trip story</span>
													<textarea class="form-control" aria-label="With textarea" name="comment_body" value="{{ v.comment_body }}"></textarea>
													<div class="redText">{{errors.comment_body}}</div>
												</div>

												<div class="col-12 mt-3">
													<label class="input-group-text">Add Photo:</label>
													<input type="file" class="form-control" name="photo">
													<div class="redText">{{errors.photo}}</div>
												</div>

												<div class="col-auto text-center mt-3">
													<input class="btn btn-lg submitButton" type="submit" name="submit" value="Submit">
													<button class="btn btn-lg submitButton" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Cancel</button>
												</div>
											</form>
										</div>
									</div>

									<div class="modal-footer">
										<h2>Enjoy Your trip</h2>
									</div>
								</div>
							</div>
						</div>
						<!-- Modal END-->
						<!-- Destination Card END-->
					{% endfor %}
				{% endif %}

			</div>
		</div>

	</section>

	<div class="parallax-1">
		<div class="caption">
			<span class="border">...Travel Right</span>
		</div>
	</div>

	<script>
		window.onload = (event) => {
			let myAlert = document.querySelector('.toast');
			let bsAlert = new bootstrap.Toast(myAlert);
			bsAlert.show();
		}
	</script>

{% endblock %}
